<template>
  <!-- 公司通讯录 -->
  <div class="view-container">
<!--    <div class="neiBian">
      <span>
        <el-button>发送邮件</el-button>
        <el-button>发送短信</el-button>
        <el-button>导出</el-button>
        <el-button>搜索</el-button>

      </span>
    </div>-->
    <!--<div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="120"></el-table-column>
        <el-table-column label="头像" width="120">
          <template></template>
        </el-table-column>
        <el-table-column label="姓名" width="120"></el-table-column>
        <el-table-column label="手机号码" width="120"></el-table-column>
        <el-table-column label="分组" width="120"></el-table-column>
        <el-table-column label="电子邮件" width="120"></el-table-column>
        <el-table-column label="操作" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage2"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="100"
        layout="sizes, prev, pager, next"
        :total="100"
      ></el-pagination>
    </div>-->

    <header class="view-header">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>公司通讯录</span>
        </div>
        <div class="header-form">
          <!--更多-->
<!--          <div class="header-form-item">
            <el-dropdown @command="handleCommand">
              <el-button type="default" :loading="delLoading">
                更多<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-refresh-right" class="color-refresh-item" command="refresh">刷新</el-dropdown-item>
                <el-dropdown-item icon="el-icon-edit" class="color-edit-item" command="edit">编辑</el-dropdown-item>
                <el-dropdown-item icon="el-icon-delete" class="color-del-item" command="del">{{isBatchesDel}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>-->
          <!--          <div class="header-form-item">
                      <el-button type="danger" icon="el-icon-plus" @click="toAddPage">添加</el-button>
                    </div>-->
          <!--搜索-->
          <!--<div class="header-form-item">
            <el-button type="primary" icon="el-icon-search" @click="fetchData">查询</el-button>
          </div>
          <div class="header-form-item title-search">
            <el-input v-model.trim="searchForm.title" placeholder="分组名称" clearable @input="fetchData"></el-input>
          </div>-->
        </div>
      </div>
    </header>

    <section class="table-container view-section">
      <el-table
        ref="table"
        :data="tableData"
        stripe
        border
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column type="selection" align="center"/>
        <el-table-column  label="头像" width="80" >
          <template slot-scope="s">
            <div class="img-wrap">
              <img :src="s.row.photo" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名"/>
        <el-table-column prop="mobileNum" label="手机号码"/>
        <el-table-column prop="userGroupName" label="分组"/>
        <el-table-column prop="email" label="电子邮件"/>
      </el-table>
    </section>

    <footer>
      <el-pagination
        :page-sizes="[10, 20, 50, 100]"
        style="text-align: right"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        :page-size="page.size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>

  </div>
</template>

<script>
  import addressBookAPI from '@/api/addrbook/addbok'
  import listMixin from '@/mixin/listMixin'
export default {
  name: "Gsitongxuen",
  mixins: [listMixin],
  data() {
    return {
      departmentId:this.$route.params.id,
      mixinParams: {
        addUrl: '',
        editUrl: '',
        propertyName: 'id',
        API: addressBookAPI,
        deleteMethod:''
      },
    };
  },
  created() {
  },
  watch:{
    $route(){
      console.log(this.$route)
      this.departmentId = this.$route.params.id
      this.fetchData()
    }
  },
  methods: {
    fetchData(){
      console.log('this.departmentId',this.departmentId)
      this.departmentId = parseInt(this.departmentId) === 3 ? '' : this.departmentId
      addressBookAPI.companyAddressBook(this.departmentId).then(res=>{
        console.log(res)
        this.tableData = res.result
        this.page.total = res.total
      })
    },
  }
};
</script>

<style scoped lang="scss">
.neiBian > span {
  display: inline-block;
  width: 100%;
  border: 1px solid rgb(214, 214, 214);
  padding: 10px;
  padding-bottom: 15px;
  padding-top: 5px;
}

.block {
  display: flex;
  justify-content: center;
}

.img-wrap {
  $number:30px;
  width: $number;
  height: $number;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

</style>
